<template>
    <div class="com__box" :style="{ width: size, height: size }">
        <div class="loading" :style="{ color }">
            <div></div>
            <div></div>
        </div>
    </div>
</template>

<script setup lang="ts">
    defineProps<{
        size?: string
        color?: string
    }>()
</script>

<style lang="scss" scoped>
    .com__box {
        display: flex;
        justify-content: center;
        align-items: end;
        width: 2rem;
        height: 2rem;

        .loading,
        .loading > div {
            position: relative;
            box-sizing: border-box;
        }

        .loading {
            display: block;
            font-size: 0;
            color: #000;
        }

        .loading > div {
            display: inline-block;
            float: none;
            background-color: currentColor;
            border: 0 solid currentColor;
        }

        .loading {
            width: 75%;
            height: 75%;
        }

        .loading > div:nth-child(1),
        .loading > div:nth-child(2) {
            position: absolute;
            left: 0;
            width: 100%;
        }

        .loading > div:nth-child(1) {
            top: -25%;
            z-index: 1;
            height: 100%;
            border-radius: 10%;
            animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
        }

        .loading > div:nth-child(2) {
            bottom: -9%;
            height: 10%;
            background: #000;
            border-radius: 50%;
            opacity: 0.2;
            animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
        }

        @keyframes square-jelly-box-animate {
            17% {
                border-bottom-right-radius: 10%;
            }

            25% {
                transform: translateY(25%) rotate(22.5deg);
            }

            50% {
                border-bottom-right-radius: 100%;
                transform: translateY(50%) scale(1, 0.9) rotate(45deg);
            }

            75% {
                transform: translateY(25%) rotate(67.5deg);
            }

            100% {
                transform: translateY(0) rotate(90deg);
            }
        }

        @keyframes square-jelly-box-shadow {
            50% {
                transform: scale(1.25, 1);
            }
        }
    }
</style>
